<template>
  <div class="question-star">
    <div class="header">
      <i class="huobo huobo-solid-star"></i>
      问答之星
    </div>
    <question-star-item :info="info1"></question-star-item>
    <question-star-item :info="info2"></question-star-item>
  </div>
</template>

<script>
import QuestionStarItem from './QuestionStarItem.vue';

export default {
  name: 'QuestionStar',
  components: {
    QuestionStarItem
  },
  data() {
    return {
      info1: {
        title: '本日回答问题最多的人',
        img: '',
        username: '李雷',
        level: 8,
        answerCount: 45,
        acceptCount: 12
      },
      info2: {
        title: '历史回答问题最多的人',
        img: '',
        username: '李雷',
        level: 8,
        answerCount: 45,
        acceptCount: 12
      }
    };
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .question-star {
    border: 1px solid #ddd;
    background-color: #fff;
    .header {
      height: 37px;
      line-height: 37px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      background-color: @mainBgColor;
      .huobo {
        color: yellow;
      }
    }
  }
</style>
